<template>
  <div>
    <div style="text-align: center">
      <el-transfer
        v-model="leftValue"
        style="text-align: left; display: inline-block"
        filterable
        :left-default-checked="[2, 3]"
        :right-default-checked="[1]"
        :render-content="renderFunc"
        :titles="['添加搜索条件', '搜索条件']"
        :button-texts="['删除','添加']"
        :format="{
          noChecked: '${total}',
          hasChecked: '${checked}/${total}'
        }"
        :data="data"
        @change="handleChange"
      >
        <template #right-footer>
          <el-button class="transfer-footer" size="medium">确定</el-button>
        </template>
      </el-transfer>
    </div>
  </div>
</template>

<script>
const options = [
  {
    key: '1',
    label: '1',
    disabled: false
  }, {
    key: '2',
    label: '已经抽血',
    disabled: false
  }, {
    key: '3',
    label: '已经抽血',
    disabled: false
  }, {
    key: '4',
    label: '已经抽血',
    disabled: false
  }
]
export default {
  data() {
    const generateData = (_) => {
      const data = []
      options.forEach(e => {
        data.push({
          key: e.key,
          label: e.label,
          disabled: e.disabled
        })
      })
      return data
    }
    return {
      data: generateData(),
      leftValue: [1],
      rightValue: [1],
      renderFunc(h, option) {
        return h('span', null, option.key, ' - ', option.label)
      }
    }
  },
  methods: {
    handleChange(value, direction, movedKeys) {
      console.log(value, direction, movedKeys)
    }
  }
}
</script>

<style>
.transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;
  }
</style>
